<template>
  <div class="view-fill">
    <div v-if="!modifyInfo.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :title="title"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <el-button
            v-if="
              $permission('cargoSpace:update') && infoList.data.status === 0
            "
            @click="update"
            >修改</el-button
          >
        </template>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="infoList"></basic-information>
          </div>
          <div class="model-panel-title">
            <p>上架规则</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="ruleList"></basic-information>
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('detailInfo') }}</p>
          </div>
          <div class="model-panel-body">
            <div class="layui-card-body">
              <!-- 表格 -->
              <page-table
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :pager="false"
                :field-list="tableInfo.fieldList"
                :handle="tableInfo.handle"
                :check-box="false"
                :tab-index="true"
                :isDynamic="true"
              >
              </page-table>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <modify
      v-if="modifyInfo.visible"
      :orderId="modifyInfo.id"
      v-model:visible="modifyInfo.visible"
      :title="modifyInfo.title"
      modifyType="1"
      @returnModify="returnModify"
    />
  </div>
</template>

<script setup name="details">
import Modify from './modify'
import {
  getGoodsLocationById,
  getGoodsLocationProductRelation,
} from '@/api/wms.js'

const emits = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'orderId'])

const title = ref('货位管理详情')
const infoList = ref({
  data: {},
  fieldList: [
    {
      label: '仓库名称',
      value: 'depotName',
    },
    {
      label: '仓库编码',
      value: 'depotCode',
    },
    {
      label: '状态',
      value: 'statusValue',
    },
    {
      label: '货位编号',
      value: 'locationNo',
    },
    {
      label: '货架编号',
      value: 'shelfNumber',
    },
    {
      label: '货架序号',
      value: 'shelfSerialNo',
    },
    {
      label: '货位层数',
      value: 'locationLayer',
    },
    {
      label: '货位列数',
      value: 'locationLine',
    },
    {
      label: '货位属性',
      value: 'locationTypeValue',
    },
    {
      label: '货位长度(cm)',
      value: 'locationLength',
    },
    {
      label: '货位宽度(cm)',
      value: 'locationWidth',
    },
    {
      label: '货位高度(cm)',
      value: 'locationHeight',
    },
    {
      label: '备注',
      value: 'remark',
      type: 'popover',
      className: 'not-br',
    },
  ],
})
const ruleList = ref({
  data: {},
  fieldList: [
    {
      label: '寄售产品允许混放',
      value: 'isConsignProductMixingValue',
    },
    {
      label: '寄售同产品不同批号效期允许混放',
      value: 'isConsignBatchExpiryDateMixingValue',
    },
    {
      label: '寄售同产品不同供应商允许混放',
      value: 'isConsignSupplierMixingValue',
    },
    {
      label: '非寄售产品允许混放',
      value: 'isNotConsignProductMixingValue',
    },
    {
      label: '非寄售同产品不同批号效期允许混放',
      value: 'isNotConsignBatchExpiryDateMixingValue',
    },
    {
      label: '非寄售同产品不同供应商允许混放',
      value: 'isNotConsignSupplierMixingValue',
    },
  ],
})
const modifyInfo = ref({
  visible: false,
  id: '',
  title: '',
})
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    { label: '名称', value: 'commonName' },
    { label: '编码', value: 'productCode', minWidth: 80 },
    {
      label: '规格',
      value: 'standard',
      minWidth: 100,
    },
    {
      label: '单位',
      value: 'unitName',
      minWidth: 80,
    },
    {
      label: '厂家',
      value: 'brandName',
    },
    {
      label: '条码类型',
      value: 'codeTypeValue',
    },
    {
      label: '产品分类',
      value: 'productCategoryValue',
      minWidth: 80,
    },
    {
      label: '容量',
      value: 'capacity',
    },
  ],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件visible
  },
})

watch(
  () => ruleList.value.data.isConsignProductMixing,
  (val) => {
    //启用下的货位修改不允许修改主信息
    if (val === 1) {
      ruleList.value.fieldList[1].show = false
      ruleList.value.fieldList[2].show = false
    } else {
      ruleList.value.fieldList[1].show = true
      ruleList.value.fieldList[2].show = true
    }
  }
)
watch(
  () => ruleList.value.data.isNotConsignProductMixing,
  (val) => {
    //启用下的货位修改不允许修改主信息
    if (val === 1) {
      ruleList.value.fieldList[4].show = false
      ruleList.value.fieldList[5].show = false
    } else {
      ruleList.value.fieldList[4].show = true
      ruleList.value.fieldList[5].show = true
    }
  }
)

onMounted(() => {
  getMain()
  getList()
})
function returnBack() {
  emits('returnBack', false)
}
function update() {
  modifyInfo.value.id = props.orderId
  modifyInfo.value.title = '修改货位'
  modifyInfo.value.visible = true
}
function returnModify() {
  getMain()
  getList()
}
function getList() {
  let query = { goodsLocationId: props.orderId }
  getGoodsLocationProductRelation(query).then((resp) => {
    if (resp && resp.success) {
      tableInfo.value.data = resp.data
    }
  })
}
function getMain() {
  getGoodsLocationById(props.orderId).then((resp) => {
    if (resp && resp.success) {
      infoList.value.data = resp.data
      ruleList.value.data = resp.data
    }
  })
}
</script>

<style scoped></style>
